<!DOCTYPE html>

<head>
    <title>hns.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">

    <!-- 引入样式 -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <link  rel="stylesheet" type="text/css" href="../css/indexx.css">
    <script type="text/javascript" src="../js/jquery.cxscroll.min.js"></script>
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../js/slide.js"></script>
    <script type="text/javascript" src="../js/jquery.carouFredSel-6.0.4-packed.js"></script>
    <script type="text/javascript" src="../js/silder.js"></script>

    <style>
        /* 幻灯片基本样式 */
        .ck-slide ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        .ck-slide {
            position: relative;
            overflow: hidden;
        }

        .ck-slide ul.ck-slide-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            margin: 0;
            padding: 0;
        }

        .ck-slide ul.ck-slide-wrapper li {
            position: absolute;
        }

        .ck-slide .ck-prev, .ck-slide .ck-next {
            position: absolute;
            top: 50%;
            z-index: 2;
            width: 35px;
            height: 70px;
            margin-top: -35px;
            border-radius: 3px;
            opacity: .15;
            background: red;
            text-indent: -9999px;
            background-repeat: no-repeat;
            transition: opacity .2s linear 0s;
        }

        .ck-slide .ck-prev {
            left: 5px;
            background: url(../img/aleft.png) #000 50% no-repeat;
        }

        .ck-slide .ck-next {
            right: 5px;
            background: url(../img/aright.png) #000 50% no-repeat;
        }

        .ck-slidebox {
            position: absolute;
            left: 50%;
            bottom: 12px;
            z-index: 30;
        }

        .ck-slidebox ul {
            height: 20px;
            padding: 0 4px;
            border-radius: 8px;
            background: rgba(0, 0, 0, 0.5);
        }

        .ck-slidebox ul li {
            float: left;
            height: 12px;
            margin: 4px 4px;
        }

        .ck-slidebox ul li em {
            display: block;
            width: 12px;
            height: 12px;
            border-radius: 100%;
            background-color: #fff;
            text-indent: -9999px;
            cursor: pointer;
        }

        .ck-slidebox ul li.current em {
            background-color: #fe6500;
        }

        .ck-slidebox ul li em:hover {
            background-color: #fe6500;
        }

        .ck-slide {
            width: 600px;
            height: 320px;
            margin: 0 auto;
        }

        .ck-slide ul.ck-slide-wrapper {
            height: 320px;
        }

        .linews ul li {
            height: 38px;
        }

        /* 左悬浮div 不随鼠标滚动改变位置*/
        .wechat{
            background:none;
            padding:0;
            position: fixed;
            top:20%;
            left: 0px;

        }
        .Q-area{padding:2px; background:#f8cf94; width:80px; height:214px;font-size: 16px;}
        .sp-B{ width:84px; position:relative; height:216px;}
        .Da01{ width:6px; height:205px; position:absolute; left:0; top:0; background:#f8cf94; cursor:pointer; }
        .Da01 img{ padding-top:97px;}
        .sp-nav ol li{ line-height:35px;  border-bottom:1px solid #FFF; text-align:center; background:#f3f3f3;}
        .sp-nav ol li a { color:#006797;}
        .jw-img img{ display:block;}
        .close-N img{ cursor:pointer;}
        /* nav_menu */
        ul.side_nav {width: 80px;float: left; background:#EDEDED;margin: 0;padding: 0; }
        ul.side_nav li {position: relative; width:80px; float: left;margin: 0;padding: 0;display: inline; overflow:visible; height:35px; line-height:35px; border-bottom:1px solid #FFF; text-align:center; cursor:pointer; z-index:2; background:#f3f3f3;}
        ul.side_nav li a { color:#006797;}
        ul.side_nav li a:hover {color: #F00; background:#FFF; display:block; }
        ul.side_nav li .piaoc-img {display: none;position: absolute;top: 0;left:-4px; height:34px; overflow:hidden;width: 137px; background:#FFF; border:1px solid #EDEDED; border-left:0;}
        .piaoc-img .left { float:left; width:100px; line-height:16px; font-size:12px;}
        .piaoc-img .right { float:right; width:37px; height:35px;}

        /* 右悬浮div 不随鼠标滚动改变位置*/
        * html{background-image:url(about:blank)}
        #qrCode31{position:absolute;}
        #qrCode31{display:block;width:234px; height:109px; position:fixed; top:180px; right:5px; display:block; z-index:200}
        #qrCode31 a{display:block; width:100%; height:100%; background:url(http://uploads.dahe.cn/huhanze/images/qgzyfwxxxt.jpg
        ) no-repeat;}
        #qrCode31 a:hover{}

        /* 右悬浮div 不随鼠标滚动改变位置*/
        * html{background-image:url(about:blank)}
        #qrCode34{position:absolute;}
        #qrCode34{display:block;width:234px; height:109px; position:fixed; top:295px; right:5px; display:block; z-index:200}
        #qrCode34 a{display:block; width:100%; height:100%; background:url(https://uploads.dahe.cn/huhanze/images/181226.jpg) no-repeat;}
        #qrCode34 a:hover{}
    </style>
</head>

<body>
<header>
    <div class="headtop">
        <div class="timer box"><span><a onclick="javascript:window.external.addFavorite('/','')" href="/hns/login">登录 </a> | <a
                onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('/');" href="/regist/affiche"> 注册</a></span>
            <script type="text/javascript" src="../js/timer.js"></script>
        </div>
    </div>

    <nav id="nav" class="box">
        <ul>
            <li><a href="/hns/tohns">首页</a></li>
            <li><a href="http://hen.wenming.cn">省文明办</a></li>
            <li><a href="http://hen.wenming.cn/wenmingchuangjian/">文明创建</a></li>
            <li><a href="http://hen.wenming.cn/daodemufan/">道德模范</a></li>
            <li><a href="/hns/zlxz">资料下载</a></li>
            <li><a href="/hns/exam">知识测验</a></li>
            <li><a href="/hns/tohns">联系我们</a></li>
        </ul>
    </nav>

    <div class="wechat">
        <div class="Da01"><img src="http://images.wenming.cn/web_wenming/images/indexsy20160715-04.jpg" /></div>
        <div class="sp-B">
            <div class="Q-area" style="height:210px;">
                <div style="height:102px;"><a href="http://www.wenming.cn/gxym/wmzg_downloads/" target="_blank"><img src="http://uploads.dahe.cn/indiboy/wenming/home/qrcode.jpg" width="80" height="102" /></a></div>
                <div class="sp-nav">
                    <ol>
                        <li></li>
                        <li></li>
                    </ol>
                </div>

                <div class="nav">
                    <ul class="side_nav">
                        <li>
                            <a href="http://henan.sina.cn/zt_d/hngyggzb?from=wap" target="_blank">公益广告</a>
                            <div class="piaoc-img"><div class="left"><a href="http://henan.sina.cn/zt_d/hngyggzb?from=wap" target="_blank">2017河南公益广告展播<br/></a></div><div class="right"><a href="http://hen.wenming.cn/zhuanti/2017zhuanti/gyggk/" target="_blank"><img src="http://uploads.dahe.cn/huhanze/images/170623.jpg" /></a></div></div>
                        </li>


                        <li>
                            <a href="http://hen.wenming.cn/wmwj/201804/t20180417_4657235.html" target="_blank">道德模范</a>
                            <div class="piaoc-img"><div class="left"><a href="http://hen.wenming.cn/wmwj/201804/t20180417_4657235.html" target="_blank">第六届河南省道德模范颁奖仪式<br/></a></div><div class="right"><a href="http://hen.wenming.cn/wmwj/201804/t20180417_4657235.html" target="_blank"><img src="http://uploads.dahe.cn/huhanze/images/180417.jpg" /></a></div></div>
                        </li>
                        <li>
                            <a href="/hns/login" target="_blank">管理系统</a>
                            <div class="piaoc-img"><div class="left"><a href="http://wmopen.dahe.cn/login" target="_blank">全省文明网<br/>动态管理系统</a></div><div class="right"><a href="http://www.wenming.cn/specials/zxdj/hjcz80/" target="_blank"><img src="http://hen.wenming.cn/wmwj/201703/P020170310535460584795.png" /></a></div></div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div id="qrCode31">
        <a href="http://ha.chinavolunteer.cn/

" target="_blank"></a>
    </div>
    <div id="qrCode34">
        <a href="https://uploads.dahe.cn/sjh/ad/20190101.rar" target="_blank"></a>
    </div>

</header>
<!--头部 end-->
<div class="banner box"><img src="../img/kaifeng.jpg" style="width: 1000px;"></div>
<div class="box">
    <div class="news left">
        <h2><span class="more"><a href="" target="_blank">更多..</a></span>新闻中心</h2>
        <ul>
            <div class="pic_news left" style="width: 750px;height: 300px;">

                <td width="400" valign="top">

                    <div class="ck-slide" style="width: 750px;height: 300px;">
                        <ul class="ck-slide-wrapper" id="topImgId">
                            <li style="opacity: 1; display: list-item;">
                                <a href="http://hen.wenming.cn/zhuanti/2015zhuanti/haorenguan/" target="_self"><img
                                        src="../img/ad001.jpg" alt="" width="630" height="320"
                                        style="height: 300px;margin-left: 58px;width: 635px;"/></a>
                            </li>
                            <c:forEach items="${picList}" var="obj">
                                <li style="opacity: 0; display: none;">
                                    <a href="http://hen.wenming.cn/wmwj/201903/t20190325_5049353.html" target="_self"><img
                                            src="../img/ad002.jpg" alt="" width="600" height="320"
                                            style="height: 300px;margin-left: 58px;width: 635px;"/></a>
                                </li>
                                <li style="opacity: 0; display: none;">
                                    <a href="http://hen.wenming.cn/wmwj/201903/t20190312_5034850.html" target="_self"><img
                                            src="../img/ad003.jpg" alt="" width="600" height="320"
                                            style="height: 300px;margin-left: 58px;width: 635px;"/></a>
                                </li>
                                <li style="opacity: 0; display: none;">
                                    <a href="http://hen.wenming.cn/wmwj/201903/t20190326_5054827.html" target="_self"><img
                                            src="../img/ad004.jpg" alt="" width="600" height="320"
                                            style="height: 300px;margin-left: 58px;width: 635px;"/></a>
                                </li>
                                <li style="opacity: 0; display: none;">
                                    <a href="http://hen.wenming.cn/wmwj/201903/t20190314_5038002.html" target="_self"><img
                                            src="../img/ad005.jpg" alt="" width="600" height="320"
                                            style="height: 300px;margin-left: 58px;width: 635px;"/></a>
                                </li>
                            </c:forEach>
                        </ul>
                        <a href="javascript:;" class="ctrl-slide ck-prev">上一张</a> <a href="javascript:;"
                                                                                     class="ctrl-slide ck-next">下一张</a>
                        <div class="ck-slidebox">
                            <div class="slideWrap">
                                <ul class="dot-wrap">
                                    <li class="current"><em>1</em></li>
                                    <li><em>2</em></li>
                                    <li><em>3</em></li>
                                    <li><em>4</em></li>
                                    <li><em>5</em></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </td>
            </div>
        </ul>
    </div>
    <script language="javascript">
        $(".ck-slide").ckSlide({
            autoPlay: true
        });
        $("#pic_list_1").cxScroll({
            speed: 500,
            time: 3500
        });
    </script>
    <div class="announce right" style="height: 345px;">
        <h2><a href="/">聚焦河南</a></h2>
        <ul>
            <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up"
                     style="height:300px">
                <li><a href="http://hen.wenming.cn/wmwj/201903/t20190321_5045747.html" target="_blank">河南省委书记王国生：奋力谱写革命老区乡村振兴新篇章</a></li>
                <li><a href="http://hen.wenming.cn/jujiaohenan/201903/t20190314_5038745.html" target="_blank">王国生寄语新闻工作者：凝聚正能量 传播好声音</a></li>
                <li><a href="http://hen.wenming.cn/weichengnianren/201903/t20190319_5043899.html" target="_blank">开封开展"扣好人生第一粒扣子"主题教育实践活动</a></li>
                <li><a href="http://hen.wenming.cn/tushuo/201811/t20181107_4888543.html" target="_blank">公益捐书与爱同行</a></li>
                <li><a href="http://hen.wenming.cn/wmwj/201903/t20190321_5046915.html" target="_blank">2018年未成年人思想道德建设工作年度测评结果公布</a></li>
                <li><a href="http://hen.wenming.cn/jujiaohenan/201903/t20190318_5041292.html" target="_blank">筑牢安全防线 河南省开展校园食品安全整治"百日行动" </a></li>
                <li><a href="http://hen.wenming.cn/wmwj/201903/t20190319_5043004.html" target="_blank">跨国救人！河南小伙为韩国患者捐献“生命种子”</a></li>
                <li><a href="http://hen.wenming.cn/jujiaohenan/201903/t20190320_5044376.html" target="_blank">解码河南乡村文化振兴：土生土长的文化味儿</a></li>
            </marquee>
        </ul>
    </div>
    <div class="blank"></div>
    <div class="ad left"><img src="../img/ad01.jpg" style="height: 140px;width: 497px;"></div>
    <div class="ad right"><img src="../img/ad02.jpg" style="height: 140px;width: 498px;"></div>
    <div class="blank"></div>
    <div class="blank"></div>
    <div class="ad">
        <table width="1000" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF" height="50">
            <tr>
                <!--<td width="8"></td>-->
                <td width="484" valign="top">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="20" class="bd" align="center"><img src="<c:url value='/index/img/qz_07.png'/>"
                                                                          width="4" height="14"/></td>
                            <td class="ylm">省辖市/省直</td>
                        </tr>
                    </table>
                    <table align="center" border="0" style="font-size:15px">
                        <tr align="center" style="height: 40px;">
                            <td width="100"><a href="toZhengZhou?flag=zhengzhou" target="_self">郑&nbsp;&nbsp;州&nbsp;&nbsp;市</a>
                            </td>
                            <td width="100"><a href="toKaiFeng" target="_self">开&nbsp;&nbsp;封&nbsp;&nbsp;市</a></td>
                            <td width="100"><a href="toLuoYang" target="_self">洛阳市</a></td>
                            <td width="100"><a href="toPingDingShan" target="_self">平顶山市</a></td>
                            <td width="100"><a href="toAnYang" target="_self">安&nbsp;&nbsp;阳&nbsp;&nbsp;市</a></td>
                            <td width="100"><a href="toHeBi" target="_self">鹤壁市</a></td>
                            <td width="100"><a href="toXinXiang" target="_self">新乡市</a></td>
                            <td width="100"><a href="toJiaoZuo" target="_self">焦作市</a></td>
                            <td width="100"><a href="toPuYang" target="_self">濮阳市</a></td>
                            <td width="100"><a href="toXuChang" target="_self">许昌市</a></td>
                        </tr>
                        <tr align="center">

                            <td width="100"><a href="toSanMenXia" target="_self">三门峡市</a></td>
                            <td width="100"><a href="toLuoHe" target="_self">漯河市</a></td>
                            <td width="100"><a href="toShangQiu" target="_self">商丘市</a></td>
                            <td width="100"><a href="toZhouKou" target="_self">周&nbsp;&nbsp;口&nbsp;&nbsp;市</a></td>
                            <td width="100"><a href="toZhuMaDian" target="_self">驻马店市</a></td>
                            <td width="100"><a href="toNanYang" target="_self">南阳市</a></td>
                            <td width="100"><a href="toXinXiang" target="_self">信阳市</a></td>
                            <td width="100"><a href="toJiYuan" target="_self">济源市</a></td>
                            <td width="100"><a href="toShengZhi" target="_self">省直</a></td>
                            <td width="100"><a href="toShengZhiEr" target="_self">省直二级机构</a></td>
                        </tr>
                    </table>
                </td>
                <td width="10"></td>
            </tr>
        </table>
    </div>
    <div class="blank"></div>
    <div class="blank"></div>
    <div class="blank"></div>
    <div id="info">
        <div class="linews left" style="height: 280px;">

            <h3><span><a href="" class="more">更多..</a></span>推荐阅读</h3>
            <ul>
                <li v-for="(title,index) in titleList">
                    <span @click="add(index)">{{title.title}}      </span>
                </li>
            </ul>
        </div>
        <div class="linews left" style="height: 280px;">
            <h3><span><a href="" class="more">更多..</a></span>地方动态</h3>
            <ul>
                <li v-for="(title,index) in titleListdf">
                    <span @click="add1(index)">{{title.title}}      </span>
                </li>
            </ul>
        </div>
        <div class="linews right" style="height: 280px;">
            <h3><span><a href="" class="more">更多..</a></span>志愿服务</h3>
            <ul>
                <li v-for="(title,index) in titleListzy">
                    <span @click="add2(index)">{{title.title}}      </span>
                </li>
            </ul>
        </div>
    </div>
    <div class="blank"></div>
    <div class="blank"></div>
    <div class="blank"></div>
</div>
</div>
<footer>
    <div class="footnav">
        <ul>
            <li><a href="/hns/tohns">首页</a></li>
            <li><a href="http://hen.wenming.cn">省文明办</a></li>
            <li><a href="http://hen.wenming.cn/wenmingchuangjian/">文明创建</a></li>
            <li><a href="http://hen.wenming.cn/daodemufan/">道德模范</a></li>
            <li><a href="/hns/zlxz">资料下载</a></li>
            <li><a href="/hns/exam">知识测验</a></li>
            <li><a href="/hns/test">联系我们</a></li>
        </ul>
    </div>
    <div class="copyright">

        <p>河南省精神文明建设指导委员会办公室主办</p>
        <p>河南日报报业集团 大河网 承办</p>
        <p>豫ICP备07006354号-1</p>
    </div>

</footer>
<script type="text/javascript">
    var vm = new Vue({
        el: "#info",
        data: {
            titleList: [],
            titleListdf: [],
        },
        created: function () {
            //alert("aaa");
            //在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。
            axios.post("/news/title").then(function (response) {
                vm.titleList = response.data.titleList;
                //alert(JSON.stringify(response.data.titleList));
                vm.titleListdf = response.data.titleListdf;
                //alert(JSON.stringify(vm.titleListdf));
                vm.titleListzy = response.data.titleListzy;
                /* $("#lalala").html=response.data.titleList[1].content */

            })
        },
        methods: {
            add(x) {
                window.location.href = "/henansheng/toNews3?id=" + vm.titleList[x].id;
            },
            add1(x) {

                window.location.href = "/henansheng/toNews3?id=" + vm.titleListdf[x].id;
            },
            add2(x) {
                window.location.href = "/henansheng/toNews3?id=" + vm.titleListzy[x].id;
            },

        }

    })
</script>
</body>
</html>
